<template>
  <van-cell center label-width="85%" is-link class="card-grade-sketch" @click.native="$emit('onClick', grade)">
    <template #icon>
      <van-image round width="40px" height="40px" fit="contain" src='none'>
        <template #error><span>{{ grade.dwmc.substr(grade.dwmc.indexOf('/') + 1).substr(0, 4)}}</span></template>
      </van-image>
    </template>
    <!-- 使用 title 插槽来自定义标题 -->
    <template #default>
      <van-row class="card-label">
        <van-row class="van-ellipsis">
          {{grade.problem_type === $vo.AssessType.CORP ? grade.dwmc.substr(grade.dwmc.indexOf('/') + 1) : grade.bmmc.substr(grade.dwmc.indexOf('/') + 1)}}
        </van-row>
        <van-row>
          问题严重程度：{{grade.wtyzcd}}
        </van-row>
        <van-row gutter="2">
          <van-col span="14">
            问题发现时间：{{grade.wtfxsj ? grade.wtfxsj.split(' ')[0] : ''}}
          </van-col>
        </van-row>
        <van-row gutter="2">
          <van-col span="12">
            是否主动暴露：{{grade.sfzdbl}}
          </van-col>
          <van-col span="12">
            是否三老问题：{{grade.sfslwt}}
          </van-col>
        </van-row>
        <van-row>
          <span class="deplayColmn">
            问题描述：{{grade.wtms}}
          </span>
        </van-row>
        <van-row gutter="1">
          <van-col>
            <van-tag :type="tagType">{{status}}</van-tag>
          </van-col>
        </van-row>
      </van-row>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'CardGradeSketch',
  props: ['grade'],
  computed: {
    status: function () {
      let stat = '未知'
      switch (this.grade.problem_status) {
        case 0:
          stat = '待评分'
          break
        case 1:
          stat = '待审核'
          break
        case 2:
          stat = '审核通过'
          break
        case 3:
          stat = '反馈待本部门审核'
          break
        case 4:
          stat = '反馈待局领导复核'
          break
        case 5:
          stat = '反馈待最终审核'
          break
        case 6:
          stat = '反馈待修改'
          break
        case 7:
          stat = '考评结束'
          break
        case 8:
          stat = '待提交'
          break
      }
      return stat
    },
    tagType: function () {
      let type = 'default'
      switch (this.grade.problem_status) {
        case 7:
          type = 'default'
          break
        default:
          type = 'primary'
      }
      return type
    }
  }
}
</script>

<style scoped lang="less">
  .card-grade-sketch{
    .van-tag{
      width: 80px;
      justify-content: center;
    }
    .van-image{
      text-align: center;
      /deep/ .van-image__error{
        background-color: #6f9dd8;
      }
      span{
        line-height: 14px;
        padding: 0px 5px;
        font-size: 12px;
        color: white;
      }
    }
    .card-label {
      .van-row:first-child{
        font-weight: 600;
      }
      line-height: 18px;
      padding: 0px 0px 0px 5px;
      font-size: 12px;
    }
  }
  .van-cell{
    padding: 10px 16px 10px 5px;
  }
  /deep/.deplayColmn {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

</style>
